<template>
  <div id="Box">
    <div id="loginBox">
      <h2>Sweet系统登录</h2>
      <p style="margin-top:30px;"><el-input placeholder="请输入账号" v-model="accinpt"></el-input></p>
      <p>
        <el-input
          placeholder="请输入密码"
          v-model="pwdinput"
          show-password
        ></el-input>
      </p>
      <p v-show="show">X用户或密码不匹配</p>
      <p><button type="button" @click="loginclick">登陆</button></p>
    </div>
    <div>
      <slide-verify
        ref="slideblock"
        v-show="slideshow"
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        slider-text="向右滑动"
        @success="onSuccess"
      ></slide-verify>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>

<script>
import { Login } from "../apis/users";
export default {
  data() {
    return {
      msg: "",
      slideshow: false,
      accinpt: "",
      pwdinput: "",
      show: false,
      zhengyan: false,
      biyan: true,
    };
  },
  methods: {
    loginclick() {
      this.slideshow = true;
    },
    onSuccess() {
      // 滑动成功
      this.slideshow = false;
      this.$refs.slideblock.reset();
      Login({
        account: this.accinpt,
        password: this.pwdinput,
      }).then((res) => {
        if (res.data.code == 0) {
          window.localStorage.setItem("user", res.data.id); //把id存到本地
          localStorage.role = res.data.role; //把登陆账号的role存到本地
          localStorage.token = res.data.token; //把登陆账号的role存到本地
          this.$router.push("/index/home");
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
          });
        }
      });
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
@import url("../assets/styles/common.less");
#Box {
  width: 100%;
  height: 100%;
  background: url(../assets/imgs/logo1.jpg) no-repeat;

  background-size: 100%;
  background-color: #9e9e9e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  #loginBox {
    width: 300px;
    height: 180px;
    h2 {
      text-align: center;
      color: @Basecolor2;
      margin-bottom: 40px;
    }
    p {
      position: relative;
      margin-top: 30px;
      color: rgb(202, 201, 201);
      .icon-geren {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      .icon-suo {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      .icon-biyan {
        position: absolute;
        top: 10px;
        right: 5px;
      }
      .icon-zhengyan {
        position: absolute;
        top: 10px;
        right: 5px;
      }
      input {
        background-color: @Basecolor2;
        border: 1px solid @tintcolor;
        width: 300px;
        height: 37px;
        outline: none;
        text-indent: 30px;
        border-radius: 2px;
      }
      button {
        width: 300px;
        height: 35px;
        background-color: @tintcolor2;
        border: 0;
        color: @Basecolor2;
        font-size: 16px;
      }
    }
  }
  .slide-verify {
    position: absolute;
    left: 39%;
    top: 41%;
  }
}
</style>